<template>
  <div class="container">
    <el-card
      class="flow-card"
      shadow="hover"
      :body-style="{
        width: '100%',
        height: '370px',
        padding: '0px',
        position: 'relative',
        overflow: 'hidden',
      }"
    >
      <div class="img-container" v-html="cardData.thumbnail"></div>
      <div class="bottom card-header">
        <h2>{{ cardData.fileName }}</h2>
        <span> {{ cardData.createTime }}</span>
      </div>
      <el-button-group class="flow-operate-group">
        <!--          <el-button type="primary" icon="el-icon-search" @click="showEditor"></el-button>-->
        <el-tooltip
          class="item"
          effect="dark"
          :content="$t('flowDesign.operate.editFlow')"
          placement="bottom"
        >
          <el-button
            v-limit="'LCZX:LCKZ:LCFL:EDIT'"
            type="primary"
            icon="el-icon-edit-outline"
            @click="editFlow(cardData.id)"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          :content="$t('flowDesign.operate.deleteFlow')"
          placement="bottom"
        >
          <el-button
            v-limit="'LCZX:LCKZ:LCFL:DELETE'"
            type="primary"
            icon="el-icon-delete-solid"
            @click="delFlow(cardData.id)"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          :content="$t('flowDesign.operate.deploymentFlow')"
          placement="bottom"
        >
          <el-button
            v-limit="'LCZX:LCKZ:LCFL:UPLOAD'"
            type="primary"
            icon="el-icon-upload"
            @click="deploymentProcess(cardData.id)"
          ></el-button>
        </el-tooltip>
      </el-button-group>
    </el-card>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { ElMessage } from 'element-plus'
const { mapActions } = createNamespacedHelpers('flowDesignStore')

export default {
  name: 'flowDescCard',
  data() {
    return {
      loading: false,
    }
  },
  props: ['cardData', 'index'],
  methods: {
    ...mapActions(['delFlowById', 'depolymentProcess']),
    showEditor() {
      this.toggleList({ flag: false })
    },
    async delFlow(flowId) {
      this.$confirm('是否删除该流程', this.$i18n.t('common.hint'), {
        confirmButtonText: this.$i18n.t('common.ok'),
        cancelButtonText: this.$i18n.t('common.cancel'),
        type: 'warning',
      }).then(async () => {
        const rst = await this.delFlowById({ id: flowId })
        if (rst.status) {
          ElMessage.success({
            message: this.$t('message.success', [this.$t('common.del')]),
            type: 'success',
          })
          this.deleteCard(this.index)
        } else {
          ElMessage.error(this.$t('message.error', [this.$t('common.del')]))
        }
      })
    },
    editFlow(flowId) {
      this.toggleList({ flag: false, id: flowId })
    },
    async deploymentProcess(flowId) {
      const rst = await this.depolymentProcess({ id: flowId })
      if (rst.status) {
        this.$message({
          type: 'success',
          message: '部署成功！',
        })
      } else {
        this.$message({
          type: 'warning',
          message: '部署失败，请重新部署！',
        })
      }
    },
  },
  inject: ['toggleList', 'deleteCard'],
  mounted() {
    this.loading = true
    setTimeout(() => {
      this.loading = false
    }, 1000)
  },
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 370px;
}

.flow-card {
  height: 100%;
  &:hover {
    cursor: pointer;
    .flow-operate-group {
      right: 0;
      display: block;
    }
    .card-header {
      opacity: 1 !important;
    }
  }
  .el-card__body {
    padding: 0;
    position: relative;
    overflow: hidden;
    .img-container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
      }
    }
    .card-header {
      text-align: left;
      background: #f8f8f8;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      opacity: 0.8;
      transition-property: opacity;
      transition-duration: 0.7s;
      h2 {
        font-size: 20px;
      }
    }
  }
  .flow-operate-group {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
  }
}
</style>
